<template>
    <div>
        <!-- 三级分类 -->
        <Category :scene="scene"></Category>
        <!-- 卡片 -->
        <el-card style="margin: 10px 0px;">
            <!-- 显示SPU -->
            <div v-show="scene==0">
                <el-button type="primary" size="default" icon="Plus" :disabled="categoryStore.c3Id?false:true" @click="addSpu" v-has="`btn.Spu.add`">添加SPU</el-button>
                <!-- 展示已有的Spu数据 -->
                <el-table style="margin: 10px 0px;" border :data="records">
                    <el-table-column label="序号" type="index" align="center" width="80px"></el-table-column>
                    <el-table-column label="SPU名称" prop="spuName"></el-table-column>
                    <!-- show-overflow-tooltip:太多描述时，隐藏后面，以...代替 -->
                    <el-table-column label="SPU描述" prop="description" show-overflow-tooltip></el-table-column>
                    <el-table-column label="SPU操作">
                        <template #="{row,$index}">
                            <el-button type="primary" size="small" icon="Plus" title="添加SKU" @click="addSku(row)" v-has="`btn.Spu.addsku`"></el-button>
                            <el-button type="primary" size="small" icon="Edit" title="修改SPU" @click="updateSpu(row)" v-has="`btn.Spu.update`"></el-button>
                            <el-button type="primary" size="small" icon="View" title="查看SKU列表" @click="findSku(row)" v-has="`btn.Spu.skus`"></el-button>
                            <el-popconfirm :title="`你确定删除${row.spuName}吗`" width="200px" @confirm="deleteSpu(row)">
                                <template #reference>
                                    <el-button type="primary" size="small" icon="Delete" title="删除SPU" v-has="`btn.Spu.delete`"></el-button>
                                </template>
                            </el-popconfirm>
                        </template>
                    </el-table-column>
                </el-table>
                <!-- 分页器 -->
                <el-pagination
                    v-model:current-page="pageNo"
                    v-model:page-size="pageSize"
                    :page-sizes="[3,5,7,9]"
                    :background="true"
                    layout=" prev, pager, next, jumper,->, sizes,total"
                    :total="total"
                    @current-change="getHasSpu"
                    @size-change="changeSize"
                />
            </div>
            <!-- 添加与修改Spu组件 -->
            <SpuForm ref="spu" v-show="scene==1" @changeScene="changeScene"></SpuForm>
            <!-- 添加sku组件 -->
            <SkuForm ref="sku" v-show="scene==2" @changeScene="changeScene"></SkuForm>
            <!-- dialog对话框：展示已有的Sku数据 -->
            <el-dialog title="SKU列表" v-model="show">
                <el-table border :data="skuArr">
                    <el-table-column label="sku名字" prop="skuName"></el-table-column>
                    <el-table-column label="sku价格" prop="price"></el-table-column>
                    <el-table-column label="sku重量" prop="weight"></el-table-column>
                    <el-table-column label="sku图片">
                        <template #="{row,$index}">
                            <img :src="row.skuDefaultImg" style="width: 100px;height: 100px;">
                        </template>
                    </el-table-column>
                </el-table>
            </el-dialog>
        </el-card>
    </div>
</template>

<script lang="ts" setup name="SPU">
    import {ref, watch,onBeforeUnmount} from 'vue'
    // 引入分类的仓库
    import useCategoryStore from '@/store/modules/category'
    import {reqRemoveSpu,reqHasSpu,reqSkuList} from '@/api/product/spu'
    import type {HasResponseData,Records} from '@/api/product/spu/type'
    // 引入子组件
    import SpuForm from './spuForm.vue'
    import SkuForm from './skuForm.vue'
    // 引入ts类型
    import type {SpuData,SkuInfoData,SkuData} from '@/api/product/spu/type'
    import { ElMessage } from 'element-plus'

    // 获取分类仓库
    let categoryStore=useCategoryStore()
    // 场景值
    let scene=ref(0) // 0：显示已有的Spu 1：添加或修改已有的Spu 2：添加SKU的结构
    // 分页器页码
    let pageNo=ref<number>(1)
    // 每一页展示几条数据
    let pageSize=ref<number>(3)
    // 存储已有的Spu的数据
    let records=ref<Records>([])
    // 存储已有SPU的总个数
    let total=ref<number>(0)
    // 获取SpuForm组件实例
    let spu=ref<any>()
    // 获取SkuForm组件实例
    let sku=ref<any>()
    // 存储所有的sku数据
    let skuArr=ref<SkuData[]>([])
    let show=ref<boolean>(false)

    // 监听三级分类Id变化
    watch(()=>categoryStore.c3Id,()=>{
        // 务必保证有三级分类id
        if(!categoryStore.c3Id) return
        getHasSpu()
    })

    // 此方法执行，可以获取某三级分类下已有的全部SPU
    async function getHasSpu(pager=1){
        // 修改当前的页码
        pageNo.value=pager
        let result:HasResponseData=await reqHasSpu(pageNo.value,pageSize.value,categoryStore.c3Id)
        if(result.code==200){
            records.value=result.data.records
            total.value=result.data.total
        }
    }

    // 分页器下拉菜单发生变化时回调
    function changeSize(){
        getHasSpu()
    }

    // 添加Spu按钮回调
    function addSpu(){
        // 切换为场景1
        scene.value=1
        // 调用子组件方法初始化
        spu.value.initAddSpu(categoryStore.c3Id)
    }

    // 子组件SpuForm绑定的自定义事件：目的是让子组件通知父组件切换场景
    function changeScene(obj:any){
        // 子组件SpuForm点击取消，变为场景0
        scene.value=obj.flag
        // 再次获取已有的Spu
        if(obj.params=='update'){
            // 更新留在当前页
            getHasSpu(pageNo.value)
        }else{
            // 添加留在第一页
            getHasSpu()
        }
    }

    // 修改已有Spu按钮的回调
    function updateSpu(row:SpuData){
        // 切换为场景1
        scene.value=1
        // 调用子组件实例方法获取已有的完整的Spu数据
        spu.value.initHasSpuData(row)
    }

    // 添加Sku按钮的回调
    function addSku(row:SpuData){
        // 切换场景二
        scene.value=2
        // 调用子组件的方法初始化添加Sku的水
        sku.value.initSkuData(categoryStore.c1Id,categoryStore.c2Id,row)
    }

    // 查看Sku回调
    async function findSku(row:SpuData){
        let result:SkuInfoData=await reqSkuList((row.id as number))
        if(result.code==200){
            skuArr.value=result.data
            // 对话框显示
            show.value=true
        }
    }

    // 删除按钮的回调
    async function deleteSpu(row:SpuData){  
        let result:any=await reqRemoveSpu(row.id as number)
        if(result.code==200){
            ElMessage({
                type:'success',
                message:'删除成功'
            })
            // 获取剩余已有Spu数据
            getHasSpu(records.value.length>1?pageNo.value:pageNo.value-1)
        }else{
            ElMessage({
                type:'error',
                message:'删除失败'
            })
        }

    }

    // 组件销毁前，清除仓库关于分类数据
    onBeforeUnmount(()=>{
        categoryStore.$reset()
    })
 
</script>

<style scoped>

</style>